<template>
  <div class="">
    <myHeader @isSHOWbtn="isSHOWbtn"></myHeader>
    <div class="tap">
      <p @click="flag = 0">全部{{ list.length }}</p>
      <p @click="flag = 1">已使用{{ statusNum }}</p>
      <p @click="flag = 2">未使用{{ statusNot }}</p>
    </div>
    <div v-if="flag == 0">
      <myList @cahngeOFF="cahngeOFF" :flag="flag" :list="list"></myList>
    </div>
    <div v-if="flag == 1">
      <myList @cahngeOFF="cahngeOFF" :flag="flag" :list="list"></myList>
    </div>
    <div v-if="flag == 2">
      <myList :flag="flag" :list="list"></myList>
    </div>
    <div v-show="show" class="popup">
      <p>过期时间搜索</p>
      <li>
        <u
          :class="value == v ? 'active' : ''"
          @click="fileterBTN(v)"
          v-for="(v, i) in listFilter"
          :key="i"
          >{{ v }}天内
        </u>
      </li>

      <button @click="show = false">取消</button>
      <button @click="filterList">确定</button>
    </div>
  </div>
</template>
<script>
import myHeader from "../components/myHeader.vue";
import myList from "../components/myList.vue";

import axios from "axios";
import { reactive, toRefs, watch, ref } from "vue";
export default {
  setup(props) {
    let obj = reactive({
      list: [],
      flag: 0,
      statusNum: 0,
      statusNot: 0,
      num: 0,
      listFilter: [3, 5, 7],
      value: "",
      cacheList: [],
    });
    let show = ref(false);
    axios.get("data.json").then((res) => {
      obj.list = res.data.cuponData;
      obj.cacheList = res.data.cuponData;
    });

    function cahngeOFF(id) {
      // 改变状态
      obj.list.forEach((element) => {
        if (element.id == id) {
          element.status = 2;
        }
      });
    }

    function isSHOWbtn() {
      console.log(1);
      show.value = true;
    }
    function fileterBTN(v) {
      if (obj.value == v) {
        obj.value = 999;
      } else {
        obj.value = v;
      }
    }

    function filterList() {
      console.log(obj.cacheList);
      obj.list = obj.cacheList.filter((item) => item.limit < obj.value);
      show.value = false;
    }

    watch(
      () => obj.list,
      () => {
        obj.statusNum = obj.list.reduce(
          (num, item) => (num += item.status == 1),
          0
        ); // 未使用总数

        obj.statusNot = obj.list.reduce(
          (num, item) => (num += item.status == 2),
          0
        ); // 已使用总数
      },
      {
        deep: true,
      }
    );
    return {
      ...toRefs(obj),
      cahngeOFF,
      isSHOWbtn,
      show,
      fileterBTN,
      filterList,
    };
  },
  components: { myHeader, myList },
};
</script>

<style lang="scss" scoped>
.popup {
  width: 60%;
  height: 100%;
  position: fixed;
  right: 0;
  background-color: #fff;
  top: 0;
}
button {
  width: 80px;
  height: 30px;
  line-height: 30px;
  margin: 30px 10px;
  &:nth-of-type(2) {
    background-color: rgb(108, 238, 32);
  }
}
.tap {
  width: 100%;
  height: 40px;
  background-color: rgb(122, 207, 9);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
u {
  text-decoration: none;
  display: table;
  padding: 5px;
  border: 1px solid #000;
  border-radius: 8px;
  margin: 5px;
}
li {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.active {
  border: 2px solid rgb(235, 84, 14);
}
</style>
